<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行业务管理系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="container header-content">
            <div class="logo">
                <span class="logo-icon">🏦</span>
                银行业务管理系统
            </div>
            <div class="user-info">
                <div class="user-avatar">AD</div>
                <div class="user-name">管理员</div>
            </div>
        </div>
    </header>
    
    <!-- 导航菜单 -->
    <div class="nav-menu">
        <ul class="menu-list">
            <li class="menu-item active" data-tab="customer">客户管理</li>
            <li class="menu-item" data-tab="card">银行卡管理</li>
            <li class="menu-item" data-tab="deposit">存款业务管理</li>
            <li class="menu-item" data-tab="transaction">交易管理</li>
        </ul>
    </div>
    
    <!-- 主内容区 -->
    <div class="container main-content">
        <!-- 客户管理页面 -->
        <div id="customer-tab" class="tab-content active">
            <h2 class="page-title">客户信息管理</h2>
            
            <div class="search-box">
                <input type="text" id="customer-search" class="search-input" placeholder="搜索客户姓名/身份证号">
                <button id="customer-search-btn" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <circle cx="11" cy="11" r="7"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    搜索
                </button>
                <button id="export-customer-btn" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                    </svg>
                    导出CSV
                </button>
            </div>
            
            <div id="customer-alert" class="alert" style="display: none;"></div>
            
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                            <circle cx="8.5" cy="7" r="4"></circle>
                            <line x1="21" y1="12" x2="9" y2="12"></line>
                        </svg>
                        客户列表
                    </div>
                    <button id="add-customer-btn" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                        </svg>
                        添加客户
                    </button>
                </div>
                
                <div id="customer-loading" class="loading" style="display: none;">
                    <div class="loading-spinner"></div>
                    加载中...
                </div>
                
                <div id="customer-table-container">
                    <table class="table" id="customer-table">
                        <thead>
                            <tr>
                                <th>客户ID</th>
                                <th>姓名</th>
                                <th>身份证号</th>
                                <th>电话</th>
                                <th>地址</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="customer-table-body">
                            <!-- 客户数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div class="pagination" id="customer-pagination">
                    <!-- 分页将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 银行卡管理页面 -->
        <div id="card-tab" class="tab-content" style="display: none;">
            <h2 class="page-title">银行卡管理</h2>
            
            <div class="search-box">
                <input type="text" id="card-search" class="search-input" placeholder="搜索卡号/客户姓名">
                <button id="card-search-btn" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <circle cx="11" cy="11" r="7"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    搜索
                </button>
                <button id="export-card-btn" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                    </svg>
                    导出CSV
                </button>
            </div>
            
            <div id="card-alert" class="alert" style="display: none;"></div>
            
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>
                            <circle cx="12" cy="12" r="2"></circle>
                        </svg>
                        银行卡列表
                    </div>
                    <button id="add-card-btn" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                        </svg>
                        添加银行卡
                    </button>
                </div>
                
                <div id="card-loading" class="loading" style="display: none;">
                    <div class="loading-spinner"></div>
                    加载中...
                </div>
                
                <div id="card-table-container">
                    <table class="table" id="card-table">
                        <thead>
                            <tr>
                                <th>卡号</th>
                                <th>客户姓名</th>
                                <th>存款类型</th>
                                <th>余额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="card-table-body">
                            <!-- 银行卡数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div class="pagination" id="card-pagination">
                    <!-- 分页将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 存款业务管理页面 -->
        <div id="deposit-tab" class="tab-content" style="display: none;">
            <h2 class="page-title">存款业务管理</h2>
            
            <div class="search-box">
                <input type="text" id="deposit-search" class="search-input" placeholder="搜索存款业务名称">
                <button id="deposit-search-btn" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <circle cx="11" cy="11" r="7"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    搜索
                </button>
                <button id="export-deposit-btn" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                    </svg>
                    导出CSV
                </button>
            </div>
            
            <div id="deposit-alert" class="alert" style="display: none;"></div>
            
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>
                            <path d="M6 12h.01M10 12h.01M14 12h.01M18 12h.01"></path>
                        </svg>
                        存款业务列表
                    </div>
                    <button id="add-deposit-btn" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                        </svg>
                        添加存款业务
                    </button>
                </div>
                
                <div id="deposit-loading" class="loading" style="display: none;">
                    <div class="loading-spinner"></div>
                    加载中...
                </div>
                
                <div id="deposit-table-container">
                    <table class="table" id="deposit-table">
                        <thead>
                            <tr>
                                <th>业务编号</th>
                                <th>业务名称</th>
                                <th>描述</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="deposit-table-body">
                            <!-- 存款业务数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div class="pagination" id="deposit-pagination">
                    <!-- 分页将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 交易管理页面 -->
        <div id="transaction-tab" class="tab-content" style="display: none;">
            <h2 class="page-title">交易管理</h2>
            
            <div class="search-box">
                <input type="text" id="transaction-search" class="search-input" placeholder="搜索卡号/交易类型">
                <button id="transaction-search-btn" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <circle cx="11" cy="11" r="7"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    搜索
                </button>
                <button id="export-transaction-btn" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                    </svg>
                    导出CSV
                </button>
            </div>
            
            <div id="transaction-alert" class="alert" style="display: none;"></div>
            
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <rect x="2" y="6" width="20" height="14" rx="2" ry="2"></rect>
                            <circle cx="12" cy="12" r="4"></circle>
                        </svg>
                        交易记录列表
                    </div>
                    <button id="add-transaction-btn" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                        </svg>
                        添加交易记录
                    </button>
                </div>
                
                <div id="transaction-loading" class="loading" style="display: none;">
                    <div class="loading-spinner"></div>
                    加载中...
                </div>
                
                <div id="transaction-table-container">
                    <table class="table" id="transaction-table">
                        <thead>
                            <tr>
                                <th>交易时间</th>
                                <th>卡号</th>
                                <th>交易类型</th>
                                <th>金额</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="transaction-table-body">
                            <!-- 交易数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <div class="pagination" id="transaction-pagination">
                    <!-- 分页将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>